//柱状图
export function columnarEcharts (xAxisData, data, title) {
  return {
    title: {
      text: title,
      subtext: 'Quantity Statistics',
      left: 'center'
    },
    grid: {
      left: "2.5%",
      right: "3%",
      bottom: "4%",
      top: "25%",
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: xAxisData
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: -30,//-30度角倾斜显示
      }
    },
    yAxis: {
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      type: 'value'
    },
    series: [
      {
        data: data,
        barWidth: 20,
        type: 'bar'
      }
    ]
  };
}

//饼图
export function annularEchar (data, title) {
  return {
    title: {
      text: title,
      subtext: 'State Statistics',
      left: 'center'
    },
    grid: {
      left: "0%",
      right: "2.5%",
      bottom: "4%",
      top: "25%",
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      formatter (item) {
        return item.marker + item.name + item.value + "%"
      }
    },
    legend: {
      orient: 'vertical',
      right: 15,
      top: 10
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: data,
        itemStyle: {
          "normal": {
            "borderWidth": 1, // 间距的宽度
            "borderColor": '#fff', //背景色
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}


//树图
export function treeEchar (data, title, subTitle) {
  return {
    title: {
      padding: [20, 20, 20, 20],
      // margin: [100, 100, 20, 20],
      text: title,
      borderColor: "#CDCDCD", //标题边框颜色
      borderWidth: 2, //设置边框粗细
      // textStyle: {//设置主标题的文字风格
      //   fontSize: 16 //文字大小
      // },
      subtext: subTitle, //设置副标题
      subtextStyle: {//设置副标题的文字风格
        color: "black",//字体颜色
        fontSize: 16, //文字大小
        lineHeight: 30,
      }
    },

    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: function (params) {
        var tip = ''
        if (params != null) {
          let Name = ''

          let IP = '设置内容：'
          tip += params.marker + Name + params.data.name + '<br/>'
          if (params.data.value) {
            tip += params.marker + IP + params.data.value + '<br/>'
          }
        }
        return tip
      }
    },

    series: [
      {
        type: 'tree',
        initialTreeDepth: 3,
        data: [data],

        top: '5%',
        left: '12%',
        bottom: '5%',
        right: '25%',
        // orient: 'TB',

        symbolSize: 12,

        label: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          fontSize: 13,
          formatter: function (params) {
            var text = params.name;
            var length = text.length;
            var lineHeight = 55; // 每行的高度
            var maxLineLength = 24; // 每行最多显示的字符数
            var lineCount = Math.ceil(length / maxLineLength); // 计算需要几行
            var lines = [];
            if (text.indexOf('\n') == -1) {
              for (var i = 0; i < lineCount; i++) {
                var line = text.substr(i * maxLineLength, maxLineLength);
                lines.push(line);
              }
            } else {
              lines.push(text);
            }
            // console.info(lines.join('\n'));
            return lines.join('\n');
          }
        },

        leaves: {
          label: {
            width: 120,
            position: 'right',
            verticalAlign: 'middle',
            align: 'left',
            overflow: 'break',
          }
        },

        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  }
}